/* eslint-disable react/jsx-key */
import React from 'react';
import PropTypes from 'prop-types';
import routes from './routes';
import {getDetail} from './api';
import {Button, Row, Col, Card, Divider, Radio} from 'antd';
import {FORM_OPTIONS, DATETIME_FORMAT} from '../constants';
import styles from './style.css';
import {conventEnumValueToString, formatDateTime} from '../utils';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import {injectIntl} from './intl';
import {gender} from '../Enum';
const {Description} = DescriptionList;
export class DetailPanel extends React.PureComponent {
    state = {
        loading: false,
        hasOperat: false,
        validate: false,
        data: {},
        questionnaire: []
    };
    componentDidMount() {
        const id = this.props.id;
        this.setState({loading: true});
        getDetail(id)
            .then(res => {
                if(res.ok)
                    this.setState({
                        loading: false,
                        data: res.data
                    });
                this.setState({
                    loading: false
                });
            });
    }

    render() {
        const {formatMessage} = this.props.intl;
        const {data} = this.state;
        const number = [
            {
                score: '1',
                color: '#fffbe6'
            },
            {
                score: '2',
                color: '#ffffb8'
            },
            {
                score: '3',
                color: '#fffb8f'
            },
            {
                score: '4',
                color: '#fff566'
            },
            {
                score: '5',
                color: '#ffec3d'
            },
            {
                score: '6',
                color: '#fadb14'
            },
            {
                score: '7',
                color: '#d4b106'
            },
            {
                score: '8',
                color: '#ad8b00'
            },
            {
                score: '9',
                color: '#876800'
            },
            {
                score: '10',
                color: '#614700'
            },
        ];
        const radioStyle = {
            display: 'block',
            height: '30px',
            lineHeight: '30px',
        };
        return (
            <div className="detail">
                <Card loading={this.state.loading}>
                    <DescriptionList size="large" title={<Row><Col span={6}>{formatMessage({
                        id: 'detailPanel.text.title',
                        defaultMessage: '基本信息'
                    })}</Col>
                    </Row>}>
                        <Description term={formatMessage({
                            id: 'detailPanel.text.code',
                            defaultMessage: '编号'
                        })}>{data.code}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.text.brandCode',
                            defaultMessage: '总代'
                        })}>{`(${data.dealerCode})/${data.dealerName}`}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.text.country',
                            defaultMessage: '国家'
                        })}>{data.country}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.text.city',
                            defaultMessage: '城市'
                        })}>{data.city}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.text.subDealerCode',
                            defaultMessage: '经销商'
                        })}>{`(${data.subDealerCode})/${data.subDealerName}`}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.text.productCategoryCode',
                            defaultMessage: '车型'
                        })}>{data.productCategoryCode}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.text.productCategoryCode',
                            defaultMessage: '车型'
                        })}>{data.productCategoryCode}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.text.customerName',
                            defaultMessage: '客户姓名'
                        })}>{data.customerName}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.text.saleDate',
                            defaultMessage: '购车日期'
                        })}>{formatDateTime(data.saleDate, DATETIME_FORMAT)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.text.gender',
                            defaultMessage: '客户性别'
                        })}>{conventEnumValueToString(gender, data.gender)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.text.contactNumber',
                            defaultMessage: '联系电话'
                        })}>{data.contactNumber}</Description>
                        <Description term={formatMessage({
                            id: 'detailPanel.text.age',
                            defaultMessage: '年龄'
                        })}>{data.age}</Description>
                    </DescriptionList>
                </Card>
                <Card {...FORM_OPTIONS.col} title={formatMessage({
                    id: 'newPanel.card.detail',
                    defaultMessage: '问题清单'
                })}>
                    {this.state.questionnaire ? this.state.questionnaire.map((v, i) => <div><Row>
                        <Radio.Group value={v.score} buttonStyle="solid">
                            {
                                number.map((v1, i1) =>
                                    <Radio.Button size="large" value={v1.score}>{v1.score}</Radio.Button>
                                )
                            }
                        </Radio.Group></Row>
                    <Row>
                        <Radio.Group value={0} onChange={this.onChange}>
                            {
                                v.extraDetails.map((v2, i2) =>
                                    <Radio defaultChecked style={radioStyle} value={i2}>
                                        {`${v2.serialNumber}：${v2.optionName}`}
                                    </Radio>
                                )
                            }
                                        其他：{v.others}
                        </Radio.Group>
                    </Row>
                    <Divider className={styles.divider}/>
                    </div>) : null}
                </Card>

                <div className="page-toolbar">
                    <Button
                        type="primary"
                        disabled={this.state.loading}
                        onClick={this.props.onCancel}>{formatMessage({
                            id: 'detailPage.text.return',
                            defaultMessage: '返回'
                        })}</Button>
                </div>
            </div>
        );
    }
}

DetailPanel.propTypes = {
    id: PropTypes.string.isRequired,
    init: PropTypes.func.isRequired,
    loading: PropTypes.bool.isRequired,
    permissions: PropTypes.array.isRequired,
    onCancel: PropTypes.func.isRequired,
    history: PropTypes.object,
    intl: PropTypes.object,
    successReturn: PropTypes.func,
};

import {connect} from 'react-redux';
import {
    tableSearch
} from './actions';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
const getPermissions = selectorFactory(['page', 'domainData', 'permission', 'data']);


const mapStateToProps = (state, props) => ({
    id: props.id,
    permissions: getPermissions(state),
});
const mapDispatchToProps = (dispatch, props) => ({
    init: () => dispatch(getDetail(props.id)),
    successReturn: () => {
        dispatch(tableSearch());
        props.history.push(routes.query.url());
    },
    onCancel: () => {
        props.history.push(routes.query.url());
    },
});
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(DetailPanel));
